import { Directive, DirectiveBinding } from 'vue'
import { useUserStore } from '../store/user'

/**
 * 权限指令
 * 用法：
 * 1. 在按钮上使用 v-permission="'user:add'" 表示需要 user:add 权限才能显示
 * 2. 在按钮上使用 v-permission="['user:add', 'user:edit']" 表示需要 user:add 或 user:edit 权限才能显示
 * 3. 在按钮上使用 v-permission-role="'admin'" 表示需要 admin 角色才能显示
 */

// 权限指令
export const permission: Directive = {
  mounted(el: HTMLElement, binding: DirectiveBinding) {
    const { value } = binding
    const userStore = useUserStore()
    
    if (value && value instanceof Array && value.length > 0) {
      // 如果传入的是数组，只要有一个权限匹配就显示
      const hasPermission = value.some(permission => {
        return userStore.hasPermission(permission)
      })
      
      if (!hasPermission) {
        el.parentNode && el.parentNode.removeChild(el)
      }
    } else if (value && typeof value === 'string') {
      // 如果传入的是字符串，需要完全匹配
      const hasPermission = userStore.hasPermission(value)
      
      if (!hasPermission) {
        el.parentNode && el.parentNode.removeChild(el)
      }
    } else {
      throw new Error(`需要指定权限值，例如 v-permission="'user:add'"或 v-permission="['user:add', 'user:edit']"`);
    }
  }
}

// 角色指令
export const permissionRole: Directive = {
  mounted(el: HTMLElement, binding: DirectiveBinding) {
    const { value } = binding
    const userStore = useUserStore()
    
    if (value && value instanceof Array && value.length > 0) {
      // 如果传入的是数组，只要有一个角色匹配就显示
      const hasRole = value.some(role => {
        return userStore.hasRole(role)
      })
      
      if (!hasRole) {
        el.parentNode && el.parentNode.removeChild(el)
      }
    } else if (value && typeof value === 'string') {
      // 如果传入的是字符串，需要完全匹配
      const hasRole = userStore.hasRole(value)
      
      if (!hasRole) {
        el.parentNode && el.parentNode.removeChild(el)
      }
    } else {
      throw new Error(`需要指定角色值，例如 v-permission-role="'admin'"或 v-permission-role="['admin', 'editor']"`);
    }
  }
}

export default {
  install(app: any) {
    app.directive('permission', permission)
    app.directive('permission-role', permissionRole)
  }
}